<template>
  <img v-if="!isLoaded" src="../../images/shop_back_svg.svg" class="shop_back_svg">
  <div v-else style="height:100%">
    <div class="container" v-show="$route.name == 'shop'">
      <!-- 商家介绍 -->
      <div class="shop-header">
        <div class="shop-header-bg">
          <img :src="imgOrigin+shopDetail.image_path" >
        </div>
        <div class="shop-wrap">
          <img class="shopicon" :src="imgOrigin+shopDetail.image_path" alt="">
          <div class="detail-box">
            <span class="shopname">{{shopDetail.name}}</span>
            <div class="row">
              {{shopDetail.float_minimum_order_amount}}元起送/{{shopDetail.order_lead_time}}送达/配送费￥{{shopDetail.float_delivery_fee}}
            </div>
            <div class="row">
              公告：{{shopDetail.promotion_info}}
            </div>
          </div>
          <van-icon name="arrow" color="#FFF" />
          <van-icon class="back-icon" name="arrow-left" @click="$router.back()"/>
        </div>
        <div class="shop-activity" 
          v-if="shopDetail.activities && shopDetail.activities[0]">
          <span class="activity-icon" :style="'background-color:#'+shopDetail.activities[0].icon_color">
            {{shopDetail.activities[0].icon_name}}
          </span>
          <span class="activity-desc">{{shopDetail.activities[0].description}}</span>
          <div class="activity-right">
            <span >{{shopDetail.activities.length}}个活动</span>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <!-- 商品列表、商品评价 -->
      <van-tabs v-model="activeTabKey" >
        <van-tab title="商品">
            <shop-foods v-if="shopFoods.length" :shopId="shopId"
              :shopDetail="shopDetail"
              :shopFoods="shopFoods"
            ></shop-foods>
        </van-tab>
        <van-tab title="评价">
          <shop-comments v-if="shopId" :shopId="shopId"></shop-comments>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 子页面 -->
    <router-view v-show="$route.name != 'shop'"></router-view>
  </div>
</template>
<script>
import shopFoods from './components/shopFoods'
import shopComments from './components/shopComments'
import {getShopInfo,getShopFoods} from '../../api/restaurant'
export default {
  components:{
    'shop-foods':shopFoods,
    'shop-comments':shopComments,
  },
  created(){
    this.shopId = this.$route.query.id
    this.getShopData()
  },
  data(){
    return {
      shopId:null,
      imgOrigin:'http://elm.cangdu.org/img/',
      activeTabKey:0,
      shopDetail:{},
      shopFoods:[],
      isLoaded:false
    }
  },
  
  methods:{
    async getShopData(){
      if(!this.shopId)
        return
      try {
        const data = await getShopInfo(this.shopId)
        this.shopDetail = data
        this.shopFoods = await getShopFoods(this.shopId)
        this.isLoaded = true
      } catch (err) {
        console.log(err);
      }
    },
  }
}
</script>
<style lang='scss' scoped>
@import '../../styles/mixin.scss';
.shop_back_svg{
  height: 100%;
  width: 100%;
}
.container{
  display: flex;
  flex-direction: column;
  height: 100%;
  .shop-header{
    position: relative;
    color: #fff;
    .shop-header-bg{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      img{
        width: 100%;
        // 高斯模糊
        filter: blur(10px);
      }
    }
    .shop-wrap{
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: .1rem;
      height: .9rem;
      position: relative;
      .back-icon{
        position: absolute;
        top: .06rem;
        left: 0rem;
        font-size: .3rem;
      }
      .shopicon{
        height: .7rem;
        width: .7rem;
        border-radius: 5%;
      }
      .detail-box{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        margin-left: .1rem;
        .shopname{
          width: 2.6rem;
          font-size: .18rem;
          font-weight: 700;
          margin-top: 0.02rem;
        }
        .row{
          width: 2.6rem;
          font-size: .12rem;
          @include text-ellipsis;
        }
      }
      
      
    }
    .shop-activity{
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 .1rem .1rem;
      .activity-icon{
        display: inline-block;
        width: .18rem;
        height: .18rem;
        line-height: .18rem;
        text-align: center;
        border-radius: .02rem;
        font-size: .12rem;
        margin-right: .1rem;
      }
      .activity-right{
        position: absolute;
        right: .1rem;
      }
      
    }
  }
  
  .van-tabs{
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    /deep/ .van-tabs__content{
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    /deep/ .van-tab__pane{
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}
</style>